<template>
  <!-- 联系客服弹窗卡片 -->
  <div
    v-if="visible"
    class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 px-4"
    @click.self="$emit('close')"
  >
    <div
      class="bg-white border-2 border-red-500 rounded-lg p-6 shadow-xl max-w-md w-full transform transition-all duration-300"
    >
      <p class="text-red-600 font-bold text-lg mb-4 text-center font-kai">
        {{ title }}
      </p>

      <button
        @click="$emit('contact')"
        class="bg-red-600 text-white px-6 py-3 rounded-lg font-kai flex items-center gap-2 w-full justify-center mb-4 transform transition-all duration-300 hover:bg-red-700 hover:scale-105"
      >
        <i class="fa fa-comments"></i>
        {{ buttonText }}
      </button>

      <p
        @click="$emit('close')"
        class="text-gray-500 cursor-pointer hover:text-gray-700 text-center font-kai transform transition-all duration-300"
      >
        返回
      </p>
    </div>
  </div>
</template>

<script setup>
defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '一对一名师长文点评，以下重点内容助您提升实力'
  },
  buttonText: {
    type: String,
    default: '联系客服解锁全部'
  }
});

defineEmits(['close', 'contact']);
</script>

<style scoped>
/* 组件样式 */
</style>